<!--首页-->
<template>
  <div class="box">
    <template v-if="listData && listData.length>0">
      <div class="top">
        <h3>您有<span class="nodes">（{{ listData ? listData.length : 0 }}）</span>条新通知</h3>
        <a @click="toRouter('/setting/notification')">更多>> </a>
      </div>
      <div class="top_header">
        <div class="item"
             v-for="item in listData" :key="item.id"
             :class="item.isRead == 0 ? 'active' : 'deafult'"
        >
          <div class="item_left">
          <span>
            <a-icon type="info-circle" theme="filled" />
            {{ item.bizTypeName }}
          </span>
            <j-ellipsis :value="item.msgContent" :length="30" />
            <a @click="seeDetails(item.bizUrl,item.id)">查看详情>></a>
          </div>
          <!--<a-icon type="close" @click="handleClose(item.id)" />-->
          <span>{{ item.createTime }}</span>
        </div>
      </div>
    </template>

    <div class="middle">
      <h3>签约进度</h3>
      <div class="middle_item">
        <div v-if="progressData.length > 0" class="progressIcon">
          <div :key="'div-'+index" v-for="(jery,index) in progressData" class="Icon">
            <template v-for="(item,index_) in imgList">
              <img :key="'ime-item-'+index_" v-if="jery.opType == item.opType" :src="item.url" :alt="item.name">
            </template>
          </div>
        </div>
        <!--    步骤条状态   finish 完成   process 进行中   error 失败   wait 等待
                flag 状态   0-未进行 1-进行中 2-已完成 3-失败
                opType     8-提交入驻信息 3-审核并生成合同 1004-线上确认合同 1005-下载合同,签署合同 1006-邮寄合同 1007-入驻完成
        -->
        <a-steps labelPlacement="vertical" size="small" v-if="progressData.length > 0">
          <a-step :key="'div-step-'+index" v-for="(jery,index) in progressData"
                  :status="jery.flag == 1 ? 'process' :
                        jery.flag == 2 ? 'finish' :
                        jery.flag == 3 ? 'error' : 'wait'"
          >
            <template v-for="item in colorList">
              <a-icon  slot="icon"
                       :style="jery.flag == item.key ? 'color:' + item.colorType : 'color: #999999'"
                       v-if="jery.flag == item.key" :key="item.key"
                       :type="item.type" theme="filled" :two-tone-color="item.colorType" />
            </template>
            <template slot="title">
                <span @click="toProessRouter(jery.opType,jery.flag,jery.flowNo)"
                      :class="jery.flag == 1 ? 'activeLine' : ''"
                      :style="jery.flag == 0 ? 'color:#999999' :
                             jery.flag == 1 ? 'color:#FF9B46' :
                             jery.flag == 2 ? 'color:#4266E5' :
                             jery.flag == 3 ? 'color:#FF6A6A' : 'color: #999999' "
                >{{ jery.desc }}</span>
            </template>
            <span slot="description">
              <span style="color:#FF6A6A;" v-if="jery.flag == 3 && jery.errDesc">{{ jery.errDesc }}</span>
              <span style="color:#666666;white-space: nowrap;" v-if="jery.opType == 3 && jery.flag == 1">大约需要2个工作日</span>
              <!--bizType  业务类型 1-纸质签 2-电子签-->
              <span style="color:#666666;" v-if="jery.opType == 1007 && jery.flag == 1 && jery.bizType == 1">合同寄送中</span>
            </span>
          </a-step>
        </a-steps>
      </div>
    </div>

    <div class="bottom1">
      <div class="bottom_box box_one">
        <div class="bottom_item">
          <div class="item_top">
            <div style="display: flex;align-items: center;">
              <img src="../../assets/index/icon-01.png" alt="我的账户">
              <h3>我的账户</h3>
            </div>
            <a v-has="'accountRecharge:button'" @click="toRouter('/myAccount/accountRecharge')">账户充值</a>
          </div>
          <div class="item_bottom">
            <template v-for='item in moneyNumList'>
              <a-statistic style='color: #2f54eb;' v-if='item.accountType==1' title="通用账户余额" :precision="2" :value="Math.round(item.balance * 100)/10000" >
                <template #suffix>元</template>
              </a-statistic>
              <a-statistic style='color: #2f54eb;' v-if='item.accountType==2' title="税费账户余额" :precision="2" :value="Math.round(item.balance * 100)/10000" >
                <template #suffix>元</template>
              </a-statistic>
            </template>
          </div>
        </div>
      </div>
      <div class="bottom_box box_two">
        <div class="bottom_item">
          <div class="item_top">
            <div style="display: flex;align-items: center;">
              <img src="../../assets/index/icon-02.png" alt="添加企业">
              <h3>企业管理<span>近<span style="color: #4266E5;">30</span>天</span></h3>
            </div>
            <a v-has="'addEnterprise:button'" @click="toRouter('/enterprise/addEnterprise')">添加企业</a>
          </div>
          <div class="item_bottom_one">
            <div class="item_bottom">
              <p>新增注册完成</p>
              <p class="money">{{ censusData.registAdd ? censusData.registAdd : 0 }}</p>
            </div>
            <div class="item_bottom">
              <p>设立中企业</p>
              <p class="money">{{ censusData.entApply ? censusData.entApply : 0 }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_box box_three">
        <div class="bottom_item">
          <div class="item_top">
            <div style="display: flex;align-items: center;">
              <img src="../../assets/index/icon-03.png" alt="发票管理">
              <h3>发票管理<span>近<span style="color: #4266E5;">30</span>天</span></h3>
            </div>
            <a></a>
          </div>
          <div class="item_bottom_one">
            <div class="item_bottom">
              <p>新增开票完成</p>
              <p class="money">{{ censusData.invocieAdd ? censusData.invocieAdd : 0 }}</p>
            </div>
            <div class="item_bottom">
              <p>审核中发票</p>
              <p class="money">{{ censusData.invoiceVerify ? censusData.invoiceVerify : 0 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <publicAccountInformation :visible='visible' :channelData='channelData.data' @resetAuthentication='resetAuthentication'></publicAccountInformation>
    <publicAccountAuthentication :visibleAuthentication='visibleAuthentication' :channelData='channelData.data' @visibleAuthenticationFun='visibleAuthenticationFun'></publicAccountAuthentication>
    <a-modal
      :width="titleObj.width"
      :visible="modelVisible"
      @cancel="cancelHandel"
      @ok="handleOk"
      :maskClosable='false'
      okText='前往【电子税务局密码】页面'
      :confirmLoading="confirmLoading">
      <span v-show="titleObj.show" slot="title">
        <a-icon theme="twoTone" type="safety-certificate" />
        {{titleObj.title}}
      </span>
      <div class='modal-content'>
        <h4>{{userCtlDetails.title}}</h4>
        <p>{{userCtlDetails.content}}</p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { queryMsgList, queryReadMsg,getChannelProgress,getIndexStatistics } from '@/api/setting'
import { Storage } from '@/utils/util'
import publicAccountInformation from './publicAccountInformation'
import publicAccountAuthentication from './publicAccountAuthentication'
import { getLoginChannel4Reg } from '@api/register'
import { getUserCtl } from '@api/login'
  export default {
    name: "Analysis",
    components:{
      publicAccountInformation,
      publicAccountAuthentication
    },
    data() {
      return {
        listData: [], //消息数据
        progressData: [],
        visible:false,
        visibleAuthentication:false,
        confirmLoading: false,
        modelVisible:false,
        userCtlDetails:{},//权限控制
        titleObj:{
          width:600,
          show:true,
          title:"登录验证",
          titleCont:'管理员账号首次登录验证'
        },
        imgList: [
          {
            id: 0,
            name: '提交入驻信息',
            opType: 8,
            url: require('../../assets/index/icon01.svg')
          },
          {
            id: 1,
            name: '审核并生成合同',
            opType: 3,
            url: require('../../assets/index/icon02.svg')
          },
          {
            id: 2,
            name: '线上确认合同',
            opType: 1004,
            url: require('../../assets/index/icon03.svg')
          },
          {
            id: 3,
            name: '下载合同',
            opType: 1005,
            url: require('../../assets/index/icon05.svg')
          },
          {
            id: 4,
            name: '邮寄合同',
            opType: 1006,
            url: require('../../assets/index/icon04.svg')
          },
          {
            id: 5,
            name: '入驻完成',
            opType: 1007,
            url: require('../../assets/index/icon06.svg')
          },
        ],
        colorList:[
          {
            key:0,
            type:"question-circle",
            colorType:'#999999',
            verifyDesc:'未进行'
          },
          {
            key:1,
            type:"clock-circle",
            colorType:'#FF9B46',
            verifyDesc:'进行中'
          },
          {
            key:2,
            type:"check-circle",
            colorType:'#4266E5',
            verifyDesc:'完成'
          },
          {
            key:3,
            type:"close-circle",
            colorType:'#FF6A6A',
            verifyDesc:'失败'
          },
        ],

        censusData: {}, //统计
        moneyNumList: [], //账户金额
        channelData:{
          data:{}
        }
      };
    },
    created() {
      this.getMsgList();  //获取消息列表
      this.getProgressList();  //获取入驻进度列表
      this.getDigitalData();  //获取账户订单统计
      this.getLoginChannel4RegFun();
      this.getUserCtlFun();
    },
    methods: {
      cancelHandel(){
        this.modelVisible = false
      },
      handleOk(){
        this.modelVisible = false
        this.$router.push({ path: '/enterprise/electronicPasswordsList'  })
      },
      getLoginChannel4RegFun(){
        getLoginChannel4Reg().then(res => {
          if(res.success){
            this.channelData.data = res.result;
            if(this.channelData.data.channelInfoVo.confirmed ==1){
              this.visible = true;
            }
            // 获取当前用户的合作模式  1 渠道总  2 非渠道总  3 混合模式
            const protocolType =  res.result.channelInfoVo.protocolType
            Storage.set('protocolType',protocolType)
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      //信息有误重新提交认证
      resetAuthentication(type){
        if(type == 1){
          this.visible = false;
        }else if(type == 2){
          this.visible = false;
          this.visibleAuthentication = true;
        }
      },
      visibleAuthenticationFun(){
        this.visibleAuthentication = false;
      },
      //路由跳转
      toRouter(name){
        this.$router.push({
          path: name
        })
      },
      //进度条跳转
      toProessRouter(opType,flag,flowNo){
        let name;
        //opType 8-提交入驻信息 3-审核并生成合同 1004-线上确认合同 1005-签署合同 1006-邮寄合同 1007-入驻完成
        //flag 状态 0-未进行 1-进行中 2-已完成 3-失败

        //console.log(this.progressData[this.progressData.length - 1].flag)

        //判断最后合同签署状态是否为已完成
        if (this.progressData[this.progressData.length - 1].flag == 2){
          if (opType == 1004){
            name = '/registerProcess/confirmContract'
          }
        }else if(flag == 1){
          if (opType == 8){
            name = '/registerProcess/registerProcess'
          }else if (opType == 1004){
            name = '/registerProcess/confirmContract'
          }else if (opType == 1005){
            // name = '/registerProcess/downloadContract?zxyAgreeId=' + flowNo
            name = '/registerProcess/confirmContract'
          }else if (opType == 1006){
            name = '/registerProcess/sendingContract?zxyAgreeId=' + flowNo
          }
        }
          // if(flag == 1){
          //   if (opType == 8){
          //     name = '/registerProcess/registerProcess'
          //   }else if (opType == 1004){
          //     name = '/registerProcess/confirmContract'
          //   }else if (opType == 1005){
          //     name = '/registerProcess/downloadContract?zxyAgreeId=' + flowNo
          //   }else if (opType == 1006){
          //     name = '/registerProcess/sendingContract?zxyAgreeId=' + flowNo
          //   }
          // }
        // }else{
        //   if (opType == 1004){
        //     name = '/registerProcess/confirmContract'
        //   }
        // }

        this.$router.push({
          path: name
        })
      },
      //查看
      seeDetails(url,id){
        let params = {};
        params.msgId = id;
        queryReadMsg(params).then(res => {
          if (res.success){
            // console.log(url)
            this.$router.push({
              path: url
            })
            this.getMsgList(this.selectType);
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      //获取列表
      getMsgList(){
        let params = {};
        params.data = {
          bizType: ''
        }   //消息类型 业务类型 101-客户入驻 201-用工场景 301-合同签署 401-任务广场 501-发票申请 601-业务结算 701-黑名单 801-白名单
        params.pageNo = 1;
        params.pageSize = 8;
        queryMsgList(params).then(res => {
          if (res.success){
            const data = res.result;
            if(data && data.length > 5){
              // 赋值list数据
              this.listData = data.records.slice(0,5);
            }else{
              // 赋值list数据
              this.listData = [];
            }

          }else{
            this.$message.warning(res.message);
          }
        })
      },
      //获取入驻进度列表
      getProgressList(){
        getChannelProgress().then(res => {
          if (res.success){
            if (res.result){
              let data = res.result
              this.progressData = data;
            }
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      //获取账户订单统计
      getDigitalData(){
        getIndexStatistics().then(res => {
          if (res.success){
            if (res.result){
              this.censusData = res.result;
              this.moneyNumList = this.censusData.balanceResp.balanceInfoVoList;
            }
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      getUserCtlFun(){
        console.log('11111')
        getUserCtl().then((res) =>{
          if(res.success){
            const data = res.result || {};
            if(data.taxPasswordPop === true){
              this.modelVisible = true;
              this.titleObj = {
                width:500,
                show:true,
                title:'季度申报提醒',
                titleCont: ''
              }
            }else{
              console.log('22222')
              this.modelVisible = false;
              window['globalData'].isGoto = false;
            }
            this.userCtlDetails = data;
          }
        })
      },
    }
  }
</script>

<style scoped lang="less">
.box {
  width: 100%;
  box-sizing: border-box;
  //background: #F9F8F9;
  padding: 0 16px 10px 16px;
  min-height: 700px;
}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .nodes {
    color: @color-red;
  }

  a {
    font-size: 16px;
    text-decoration: underline;
  }
}

h3 {
  font-size: 18px;
  color: @color-smudge;
  font-weight: bolder;
}

.top_header {
  width: 100%;
  background: @color-white;
  padding: 30px 24px;

  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 10px;
    height: 34px;
    border-radius: 2px;
    cursor: pointer;

    .item_left {
      color: @color-gary;
      font-size: 14px;

      span:nth-child(1) {
        color: @color-blue;
        margin-right: 6px;
      }

      a {
        margin-left: 10px;
      }
    }
  }
}

.middle {
  width: 100%;
  background: @color-white;
  padding: 30px 20px;

  h3 {
    margin: 0 0 20px 20px;
  }

  .progressIcon{
    width: 100%;
    padding: 0 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .Icon{
      width: 60px;
      height: 60px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

}

.active{
  background: #EEF1FD;
  border: 1px solid @color-blue;
}
.deafult{
  background: #F9F8F9;
  a{
    color: @color-lightGary;
  }
  .item_left span:nth-child(1){
    color: @color-lightGary!important;
  }
}

.activeLine{
  text-decoration: underline;
  cursor: pointer;
}

.bottom{
  width: 100%;
  margin-top: 20px;
  padding: 30px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .bottom_item{
    width: 30%;
    background: @color-white;
    border: 2px solid @color-blue;
    border-radius: 10px;
    padding: 10px 8px 30px 16px;
    .item_top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      a{
        text-decoration: underline;
        color: @color-orange;
        cursor: pointer;
      }
      h3 > span{
        margin-left: 15px;
        color: @color-smudge;
        text-decoration: none;
        font-size: 14px;
        font-weight: lighter;
      }
    }
    .item_bottom{
      p{
        text-align: center;
      }
      p:nth-child(1){
        margin-top: 10px;
      }
      .money{
        color: @color-blue;
        font-weight: bolder;
        font-size: 60px;
        margin-bottom: 0;
      }
    }

    .item_bottom_one{
      display: flex;
      justify-content: space-between;
      .item_bottom{
        width: 50%;
      }
      .item_bottom:nth-child(2) .money{
        color: @color-orange;
      }
    }
  }
}


.bottom1{
  width: 100%;
  padding: 30px 30px;
  margin-top: 20px;
  background: @color-white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  .bottom_box{
    //width: 30%;
    width: 400px;
    padding: 10px 0;
    min-height: 300px;
    display: flex;
    justify-content: center;
    //align-items: stretch;
    align-items: center;
    .bottom_item{
      width: 85%;
      min-height: 260px;
      padding: 30px 10px;
      //background: rgba(0,0,0,.5);
      .item_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        a{
          text-decoration: underline;
          color: @color-blue;
          cursor: pointer;
        }
        img{
          width: 40px;
        }
        h3{
          margin-bottom: 0;
        }
        h3 > span{
          margin-left: 15px;
          color: @color-smudge;
          text-decoration: none;
          font-size: 14px;
          font-weight: lighter;
        }
      }


      .item_bottom{
        margin-top: 40px;
        p{
          font-weight: bolder;
          display: inline-block;
        }
        .money{
          color: @color-blue;
          font-size: 20px;
          margin-bottom: 0;
          font-weight: normal;
          margin-left: 20px;
        }
      }

      .item_bottom_one{
        display: flex;
        justify-content: space-between;
        .item_bottom{
          width: 50%;
        }
      }
    }
  }
  .box_one{
    background: url("../../assets/index/icon_index01.svg") no-repeat;
    background-size: 100% 100%;
  }
  .box_two{
    background: url("../../assets/index/icon_index02.svg") no-repeat;
    background-size: 100% 100%;
  }
  .box_three{
    background: url("../../assets/index/icon_index03.svg") no-repeat;
    background-size: 100% 100%;
  }

}

/deep/.ant-statistic{
  display: flex;
  align-items: flex-end;
}
/deep/.ant-statistic-title{
  font-weight: bolder;
  color: @color-smudge;
}
/deep/.ant-steps-item-title{
  &:hover{
    cursor: pointer;
  }
}
/deep/.ant-statistic-content{
  margin-left: 20px;
  color: @color-blue;
}

/deep/.ant-modal-title{
  font-size: 16px;
}
</style>
